<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>短信中心><router-link to="/duanxin/fasongjilu">发送记录</router-link></div>
          --><div class="hei10"></div>
        <div class="conlist" v-loading='loading'>
          <div style="margin: 20px; color: rgb(89, 89, 89); font-size: 18px; font-weight: bold;" class="kflexc"><span @click="$router.go(-1)" style="margin-right: 20px; font-size: 14px;">< 返回</span>短信签名管理</div>
          <div style="background: rgb(220, 230, 243); margin: 20px; font-size: 14px; padding: 20px;">签名需包含品牌名、公司名或店铺名称，通用广泛的词语无法审核通过，签名审核通常24小时内，您可联系客服催促</div>
          <el-button type="danger"  round  style="margin:0 20px 20px;" @click="tianjia" >添加签名</el-button>
          <div class="list listth flex">
            <div class="th">序号</div>
            <div class="th">签名</div>
            <div class="th">添加时间</div>
            <div class="th">签名状态</div>
            <div class="th">操作</div>
          </div>
          <div class="list listtd flex" v-for="item in list" :key="item.id">
            <div class="td">{{item.id}}</div>
            <div class="td">{{item.summary}}</div>
            <div class="td">{{item.created_at}}</div>
            <div class="td">
              <div v-if="item.status == 0">申请中</div>
              <div v-if="item.status == 1">通过</div>
              <div v-if="item.status == 2">已拒绝</div>
            </div>
            <div class="td">
              <el-button type="text" v-if="item.status != 0" @click="shanchu(item.id)">删除</el-button>
            </div>
          </div>
          <el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next"
            :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="添加签名" center :visible.sync="log" :close-on-press-escape="false" :close-on-click-modal="false" width="700px">
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">签名名称</div>
        <div><el-input v-model="all.name" style="width: 300px;" placeholder="请输入签名名称"></el-input></div>
      </div>
      <div style="margin-top:20px; color:#f00;">注:短信签名必须实名报备后才能正常发送，请联系客服走实名流程</div>
      <!-- <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">签名主体公司名称</div>
        <div><el-input v-model="all.name" style="width: 300px;" placeholder="请输入签名主体公司名称"></el-input></div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">企业法人代表</div>
        <div><el-input v-model="all.name" style="width: 300px;" placeholder="请输入企业法人代表"></el-input></div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">企业信用代码</div>
        <div><el-input v-model="all.name" style="width: 300px;" placeholder="请输入企业信用代码"></el-input></div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">企业责任人</div>
        <div><el-input v-model="all.name" style="width: 300px;" placeholder="请输入企业责任人"></el-input></div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">责任人身份证</div>
        <div><chuantu ref="chuantu" @getimg="getimg"  :imgs="all.web_logo"></chuantu></div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">上传营业执照</div>
        <div><el-input v-model="all.name" placeholder="请输入责任人身份证"></el-input></div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">上传经办人身份证正反面</div>
        <div><el-input v-model="all.name" placeholder="请输入责任人身份证"></el-input></div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 120px; margin-right: 20px;">上传经办人手持身份证照片或经办人工作场景正面照片</div>
        <div><el-input v-model="all.name" placeholder="请输入责任人身份证"></el-input></div>
      </div> -->


    	<span slot="footer" class="dialog-footer">
    		<el-button type="info"  round  @click="log = false">关闭</el-button>
        <el-button type="danger"  round  @click="tianjiago">添加</el-button>
    	</span>
    </el-dialog>

    <!-- <foot></foot> -->
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import chuantu from "../zujian/chuantu.vue";
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,chuantu
    },
    name: "fasongjilu",
    data() {
      return {
        total: 0,
        pagesize: 20,
        page: 1,
        list: "",
        loading: true,
        all:{},
        log:false
      }
    },
    created() {
      this.getsign()
    },
    mounted() {

    },
    methods: {
      getimg: function(img) {
        this.all.customer = img
      },
      shanchu:function(id){
        this.$confirm('确定要删除吗?', '提示', {
        	confirmButtonText: '确定',
        	cancelButtonText: '取消',
        	type: 'warning'
        }).then(() => {
        	axios.post('/api/plan-market/message/sign/delete',{id:id})
        		.then(response => {
        			if (response.data.msg.code == 0) {
        				this.getsign()
        			} else {
        				if (response.data.msg.code == 50401) {
        					this.$router.push({
        						path: "/login"
        					});
        					return false
        				}
        				this.$message.error(response.data.msg.info);
        			}
        		})
        })
      },
      tianjiago:function(){
        if(!this.all.name){
          this.$message.success('请输入签名名称');
          return false
        }
        this.addsigning = true
        axios.post('/api/plan-market/message/addsign',{signname:this.all.name})
          .then(response => {
            if(response.data.msg.code == 0){
              this.$message.success('已申请，请等待联系');
              this.getsign()
              this.log = false
            }else{
              this.$message.error(response.data.msg.info);
            }
          })
      },
      tianjia:function(){
        this.log = true
      },
      getsign:function(){
      	axios.get('/api/plan-market/message/sign/list')
      		.then(response => {
      			if(response.data.msg.code == 0){
      				this.list = response.data.data.data
              this.loading = false
      			}else{
      				if(response.data.msg.code == 50401){this.$router.push({ path: "/login" }); return false}
      				this.$message.error(response.data.msg.info);
      			}
      		})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {


        .title {
          border-bottom: 1px #EAEAEA solid;
          line-height: 45px;
          padding-left: 30px;
          font-size: 16px;
          background: #F9F9F9;
          color: #727272
        }

      /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }

      .powertop {
      	display: flex;
      	background:#f9f9f9;
      }

      .powertopli {
        flex-basis: 180px;
        line-height: 50px;
        border-bottom: 3px #F9F9F9 solid;
        color: #727272;
        border-right: 1px #F9F9F9 solid;
        font-size: 16px;
        text-align: center;
      }

      .powertopact {
        background: #FFFFFF;
        border-bottom: 3px #2974FF solid;
      }

      .conlist {
        padding-bottom: 20px;
        background: #FFFFFF;
        min-height: 800px;

        .flex {
          display: flex;
          flex-wrap: wrap;
        }

        .flexbt {
          justify-content: space-between;
        }

        .renguantop {
          padding: 20px;
          padding-bottom: 10px;


          .jiediand {
            font-size: 16px;
            line-height: 30px;
            margin-right: 20px;
          }

          .jiedianx {
            font-size: 14px;
            color: #F1A533;
            line-height: 35px;
          }

          .duanxinn {
            color: #B8B8B8;
            line-height: 35px;
            margin-right: 10px;
          }

          .duanxinu {
            color: #DF3434;
            line-height: 35px;
            margin-right: 10px;
          }

          .duanxinb {
            background: #EEF7FF;
            line-height: 35px;
            color: #FFFFFF;
            padding: 0 10px;
            border-radius: 3px;
          }
        }

        .xinjianrenwu {
          padding: 20px;
        }

        .list {
        	text-align: center; padding: 0 20px;
        	line-height: 60px;

        	.th {
        		flex: 1;
        		background: rgb(246, 246, 246);
            color: rgb(86, 86, 86); font-size: 14px; line-height: 45px;
        	}

        	.td {
        		flex: 1;
        		border-bottom: 1px #EAEAEA solid;
        		height: 60px;
            line-height: 60px;
        		overflow: hidden; font-size: 14px;
        	}
        }
      }

  }
</style>
